<template>
  <div v-loading="loading" class="projectClassification-content">
    <div class="top-content">
      <div class="item">
        <div class="class-one">
          <div class="title">A类型:</div>
          <div class="content">
            <div class="left">
              <el-checkbox-group v-model="checkedCities1" @change="handleCheckedCitiesChange1">
                <el-checkbox
                  v-for="item in tableData"
                  v-if="item.categoryGroupTypeCode === 'A' && !item.isBigTeam"
                  :key="item.id"
                  :label="item.id"
                >{{ item.name }}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="right">
              <span>移动至</span>
              <div class="radio-main">
                <el-radio-group v-model="categoryGroupTypeCodeA">
                  <el-radio label="B">B类</el-radio>
                  <el-radio label="C">C类</el-radio>
                </el-radio-group>
              </div>
              <div>
                <el-button size="mini" type="primary" @click="del(1)">确定</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="class-one">
          <div class="title">B类型:</div>
          <div class="content">
            <div class="left">
              <el-checkbox-group v-model="checkedCities2" @change="handleCheckedCitiesChange2">
                <el-checkbox
                  v-for="item in tableData"
                  v-if="item.categoryGroupTypeCode === 'B' && !item.isBigTeam"
                  :key="item.id"
                  :label="item.id"
                >{{ item.name }}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="right">
              <span>移动至</span>
              <div class="radio-main">
                <el-radio-group v-model="categoryGroupTypeCodeB">
                  <el-radio label="A">A类</el-radio>
                  <el-radio label="C">C类</el-radio>
                </el-radio-group>
              </div>
              <div>
                <el-button size="mini" type="primary" @click="del(2)">确定</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="class-one">
          <div class="title">C类型:</div>
          <div class="content">
            <div class="left">
              <el-checkbox-group v-model="checkedCities3" @change="handleCheckedCitiesChange3">
                <el-checkbox
                  v-for="item in tableData"
                  v-if="item.categoryGroupTypeCode === 'C' && !item.isBigTeam"
                  :key="item.id"
                  :label="item.id"
                >{{ item.name }}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="right">
              <span>移动至</span>
              <div class="radio-main">
                <el-radio-group v-model="categoryGroupTypeCodeC">
                  <el-radio label="A">A类</el-radio>
                  <el-radio label="B">B类</el-radio>
                </el-radio-group>
              </div>
              <div>
                <el-button size="mini" type="primary" @click="del(3)">确定</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="class-one">
          
          <div class="title" style="width:75px">大团体项目:</div>
          <div class="content">
            <div class="left">
              <div v-for="item in tableData" v-if="item.isBigTeam" :key="item.id">{{item.name}}</div>
            </div>
            <!-- <div class="right">
              <span>移动至</span>
              <div class="radio-main">
                <el-radio-group v-model="radio3">
                  <el-radio :label="1">A类</el-radio>a
                  <el-radio :label="2">B类</el-radio>
                </el-radio-group>
              </div>
              <div>
                <el-button size="small" type="primary">确定</el-button>
              </div>
            </div>-->
          </div>
        </div>
      </div>
      <!-- <div class="text">
        <span>大团体项目: 团体竞技</span>
        <span>团体品势</span>
      </div>-->
    </div>
    <div class="save">
      <el-button size="mini" type="primary" @click="confirm">保存</el-button>
    </div>
  </div>
</template>
<script>
import {
  api_GET_category,
  api_POST_categoryCategoryGroups
} from "@/extend/api/gameswaggerApi/common";
export default {
  name: "ProjectClassification",
  data() {
    return {
      tableData: [],
      categoryGroupTypeCodeA: "B",
      categoryGroupTypeCodeB: "A",
      categoryGroupTypeCodeC: "A",
      loading: false,
      checkedCities1: [],
      checkedCities2: [],
      checkedCities3: []
    };
  },
  created() {
    console.log(this.$route.params);
    this.getCategory();
  },
  methods: {
    // 列表
    getCategory() {
      this.loading = true;

      api_GET_category({
        CompetitionId: this.$route.params.id, 
      }).then(
        res => {
          console.log(res);
          this.tableData = res.items || [];
          // this.totalPage = res.totalCount;
          this.loading = false;
        },
        error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: "error", message: _msg });
          this.loading = false;
        }
      );
    },
    handleCheckedCitiesChange1(value) {
      this.checkedCities1 = value;
      console.log(this.checkedCities1);
    },
    handleCheckedCitiesChange2(value) {
      this.checkedCities2 = value;
      console.log(this.checkedCities2);
    },
    handleCheckedCitiesChange3(value) {
      this.checkedCities3 = value;
      console.log(this.checkedCities3);
    },

    async del(index) {
      this.tableData = this.tableData.map(item => {
        if (index === 1) {
          if (this.checkedCities1.indexOf(item.id) !== -1) {
            item.categoryGroupTypeCode = this.categoryGroupTypeCodeA;
          }
        }
        if (index === 2) {
          if (this.checkedCities2.indexOf(item.id) !== -1) {
            item.categoryGroupTypeCode = this.categoryGroupTypeCodeB;
          }
        }
        if (index === 3) {
          if (this.checkedCities3.indexOf(item.id) !== -1) {
            item.categoryGroupTypeCode = this.categoryGroupTypeCodeC;
          }
        }
        return item;
      });
      this.checkedCities1 = [];
      this.checkedCities2 = [];
      this.checkedCities3 = [];
    },
    confirm() {
      const params = {
        competitionId: this.$route.params.id,
        inputs: this.tableData.map(item => {
          return {
            categoryId: item.id,
            categoryGroupTypeCode: item.categoryGroupTypeCode
          };
        })
      };
      api_POST_categoryCategoryGroups(params).then(res => {
        this.$message.success('保存成功') 
        console.log(res);
        this.checkedCities1 = [];
        this.checkedCities2 = [];
        this.checkedCities3 = [];
        this.getCategory();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.projectClassification-content {
  width: 100%;
  display: flex;
  // align-items: center;
  flex-direction: column;
  .top-content {
    .class-one {
      display: flex;
      margin-bottom: 15px;
      &:nth-child(1) {
        padding-right: 30px;
        box-sizing: border-box;
      }
      &:nth-child(2) {
        padding-right: 30px;
        box-sizing: border-box;
      }
      &:nth-child(3) {
        padding-right: 30px;
        box-sizing: border-box;
      }
      &:nth-child(4) {
        font-size: 15px;
        font-weight: 500;
        color: #303133;
        .left {
          margin-right: 0 !important;
          display: flex;
          flex-wrap: wrap;
          border: 0 !important;
          padding-left: 0 !important;
          div {
            margin-right: 20px;
            margin-bottom: 15px;
          }
        }
      }
      .title {
        margin-right: 10px;
        text-align: left;
        margin-top: 15px;
        font-size: 14px;
        font-weight: 500;
        color: #303133;
      }
      .content {
        display: flex;
        align-items: center;
        .left {
          width: 600px;
          min-height: 50px;
          border: solid 1px #eaeefb;
          padding: 15px;
          box-sizing: border-box;
          margin-right: 15px;
          .el-checkbox-group {
            content: "";
          }
          .el-checkbox-group {
            display: flex;
            align-content: stretch;
            // justify-content: space-between;
            flex-wrap: wrap;
          }
          .el-checkbox {
            margin-bottom: 15px;
            margin-right: 20px;
          }
        }
        .right {
          display: flex;
          align-items: center;
          > span {
            font-size: 14px;
            font-weight: 500;
            color: #303133;
          }
          .el-radio-group {
            display: flex;
            flex-direction: column;
            .el-radio {
              &:nth-child(1) {
                margin-bottom: 15px;
              }
            }
          }
          .radio-main {
            display: flex;
            flex-direction: column;
            margin: 0 20px;
          }
        }
      }
    }
  }
  .text {
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    padding-top: 15px;
    > span {
      &:nth-child(2) {
        margin-left: 30px;
      }
    }
  }
  .save {
    width: 100%;
    padding-left:35%;
  }
}
</style>
